<template>
    <div v-loading="loading">
        <el-card body-style="padding:10px" class="box-card">
            <!-- 根据type选择 -->
            <el-date-picker @change="getTimes" end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期" type="datetimerange" v-model="date_times" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            <el-select placeholder="请选择类型" v-model="query.type">
                <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in options"></el-option>
            </el-select>

            <el-button @click="page=1;init()" size="small" style="margin-left: 30px;" type="primary">搜索</el-button>
        </el-card>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="440px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
 
                <el-table-column label="用户ID" prop="user_id">
                </el-table-column>

                <el-table-column label="用户昵称" prop="user_info.name"></el-table-column>
                <el-table-column label="用户头像" prop>
                    <template slot-scope="scope">
                        <el-image class="border" style="width: 50px; height: 50px" :src="scope.row.user_info.avatar"
                            :preview-src-list="toArray(scope.row.user_info.avatar)">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column label="订单号" prop="trade_no"></el-table-column>

                <el-table-column label="描述" prop="desc"></el-table-column>

                <el-table-column label="秀币价格" prop="balance"></el-table-column>

                <el-table-column label="类型" prop="type">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.type == 'live_fee'">直播付费</el-tag>
                        <el-tag type="success" v-else-if="scope.row.type == 'live_gift'">直播礼物</el-tag>
                        <el-tag type="success" v-else-if="scope.row.type == 'long'">长视频付费</el-tag>
                        <el-tag type="success" v-else-if="scope.row.type == 'short'">短视频付费</el-tag>
                        <el-tag type="success" v-else-if="scope.row.type == 'tipping'">作品打赏</el-tag>
                        <el-tag type="success" v-else-if="scope.row.type == 'one_by_one'">密聊</el-tag>
                        <el-tag type="success"  v-else-if="scope.row.type == 'same_city'">同城</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <!-- <el-table-column label="操作"> -->

                <!-- <el-button size="mini" slot="reference" type="success" style="padding: 10px"
                @click="toDetails(scope.row.id)">详情</el-button>-->

                <!-- <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.id" v-if="scope.row.id"></UserInfo>
                </template>-->
                <!-- </el-table-column> -->
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange" layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import list from '@/api/bank.json'
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    mixins: [initData],
    components: {
        treeSelect,
        medium,
    },
    data() {
        return {
            query: {
                type: null,
                start_time: '',
                end_time: '',
            },
            value: '',
            date_times: [],
            options: [
                {
                    value: 'live_fee',
                    label: '直播付费',
                },
                {
                    value: 'live_gift',
                    label: '直播礼物',
                },
                {
                    value: 'long',
                    label: '长视频付费',
                },
                {
                    value: 'short',
                    label: '短视频付费',
                },
                {
                    value: 'tipping',
                    label: '作品打赏',
                },
                {
                    value: 'one_by_one',
                    label: '密聊',
                },
                {
                    value: 'same_city',
                    label: '同城',
                },
            ],
            typeList: list,
            visible: false,
            loading: false,
            images: [],
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()
    },
    methods: {
        getTimes(value) {
            this.query.start_time = value[0]
            this.query.end_time = value[1]
        },
        beforeInit() {
            this.url = '/money-log/index'
            this.init() //重新请求数据
        },
        selectFun(val) {
            this.query.bank_name = val
        },

        toDetails(id) {
            this.$router.push({ path: '/offline-details?id=' + id })
        },

        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },

        closeBox() {
            this.type = 'create'
            this.visible = false
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flex {
    display: flex;
}
</style>